<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <div class="title">
        <span>{{ index + 1 }}F</span> {{ item.c_name }}
      </div>
      <div class="goodsList">
        <GoodsItem v-for="(item2, index2) in item.children"
                   :key="index2"
                   :goodsInfo="item2" />
      </div>

    </div>
  </div>
</template>

<script>
import GoodsItem from 'components/common/goodsItem/GoodsItem'
import { getCategory } from 'server/front_k'

const itemData1 = {
  img:
    'https://img10.360buyimg.com/cf/jfs/t1/146669/25/765/49308/5ee86e09E0dc22913/6a1cdeeb6766e0a6.jpg!q80',
  title: '芦荟酒美人芦荟酒美人芦荟酒美人芦荟酒美人',
  target: '20000',
  raiseed: '1000',
  remainDate: '2天'
}

export default {
  data() {
    return {
      list: []
    }
  },

  components: {
    GoodsItem
  },
  created() {
    getCategory().then(res => {

      this.list = res.data
    })
  }
}
</script>

<style scoped>
.title {
  line-height: 40px;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: #e5e5e5 1px solid;
}
.title span {
  border: 2px solid #3ae0ab;
  font-size: 22px;
  line-height: 22px;
  padding: 5px;
  border-radius: 3px;
  color: #3ae0ab;
}
.goodsList {
  margin: 30px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>